<template>
  <a-tooltip
    placement="top"
    title="{text}"
    style="display: inline-block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
  >
    {{ content }}
  </a-tooltip>
</template>

<script>
export default {
  name: 'TextTip',
  props: {
    text: { default: '' },
    defaultText: { default: '-' },
  },
  computed: {
    content() {
      return [undefined, null, ''].includes(this.text) ? this.defaultText : this.text;
    },
  },
};
</script>
